<template>
<div id="login">
  <el-form  id="form">
    <el-form-item class="item" >
      <el-input class="input" v-model="search"  style="width:91%"  id="search" placeholder="请输入搜索"></el-input>
      <el-button @click="Search" class="btn">搜索</el-button>
      <el-button @click="addUser" class="btn">添加</el-button>
    </el-form-item>
    <el-form-item>
      <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="username"
      label="账号"
     >
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
     >
    </el-table-column>
    <el-table-column
      prop="roles"
      label="角色"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      >
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      >
    </el-table-column>
    <el-table-column
      prop="job"
      label="职位"
    >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button  class="btncaozuo" type="text" @click="handleUpdate(scope.row)" size="small">编辑</el-button>
        <el-button  class="btncaozuo" type="text" @click="handledelete(scope.row)" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-form-item>
  </el-form>
  <el-pagination
  class="pagination"
  background
  layout="prev, pager, next"
  :total="pageTotal"
  :page-size="paseSize"
  @current-change="pageChange"
  
  >
</el-pagination>
<!-- 修改对话弹窗 -->
<el-dialog
  title="修改"
  :visible.sync="dialogVisible"
  width="30%"
  append-to-body>
  <el-form v-model="newscope">
    <el-form-item label="账号：" label-width="70px">
        <el-input v-model="newscope.username"></el-input>
    </el-form-item>
    <el-form-item label="密码：" label-width="70px">
        <el-input v-model="newscope.password"></el-input>
    </el-form-item>
    <el-form-item label="角色：" label-width="70px">
       <el-select  v-model="actor">
         <el-option :label="item.label" :value="item.value" v-for=" item in this.roles" :key="item.value">

        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="姓名：" label-width="70px">
        <el-input v-model="newscope.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄：" label-width="70px">
        <el-input v-model="newscope.age"></el-input>
    </el-form-item>
    <el-form-item label="职位：" label-width="70px">
      <el-select  v-model="job">
        <el-option :label="item.label" :value="item.value" v-for=" item in options" :key="item.value">

        </el-option>
      </el-select>
    </el-form-item>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="UpdateUser">确 定</el-button>
  </el-form>

</el-dialog>
<!-- 添加对话框 -->
<el-dialog
  title="添加"
  :visible.sync="ADDdialogVisible"
  width="30%"
  append-to-body>
  <el-form v-model="newscope">
    <el-form-item label="账号：" label-width="70px">
        <el-input v-model="newscope.username"></el-input>
    </el-form-item>
    <el-form-item label="密码：" label-width="70px">
        <el-input v-model="newscope.password"></el-input>
    </el-form-item>
    <el-form-item label="角色：" label-width="70px">
       <el-select  v-model="actor">
         <el-option :label="item.label" :value="item.value" v-for=" item in this.roles" :key="item.value">

        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="姓名：" label-width="70px">
        <el-input v-model="newscope.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄：" label-width="70px">
        <el-input v-model="newscope.age"></el-input>
    </el-form-item>
    <el-form-item label="职位：" label-width="70px">
      <el-select  v-model="job">
        <el-option :label="item.label" :value="item.value" v-for=" item in options" :key="item.value">

        </el-option>
      </el-select>
    </el-form-item>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addinfo">确 定</el-button>
  </el-form>

</el-dialog>
</div>

</template>
    
<script>
export default {
 data(){
   return{
     search:"",
     tableData:[],
     tableArr:[],
     pageTotal:0,
     paseSize:0,
     dialogVisible:false,
     newscope:{},
     job:'',
     ADDdialogVisible:false,
     options: [{
          value: 0,
          label: '前端工程师'
        }, {
          value: 1,
          label: '后端工程师'
        }, {
          value: 2,
          label: '软件测试'
        }],

      roles:[{
        value:0,
        label:'editor'
      },
      {
        value:1,
        label:'manager'
      }
      ],
      actor:''
   }
 },
 methods:{
   addinfo(){
        this.newscope.job=this.options[this.job].label;
        this.newscope.roles=this.roles[this.actor].label;
        this.newscope.id=Math.random()*100+Math.random()*10+Math.random();
        this.newscope.token=Math.random()*100+Math.random()*10+Math.random();
        this.$http.post('/adduser',{params:this.newscope}).then(res=>{
        console.log(res.data);
        this.tableData=res.data.List.user;
        this.ADDdialogVisible=false;
        alert("添加成功")
     })


     
   },
   addUser(){
     if(this.newscope.name!=""){
       this.newscope==""
     }
     //用户添加
     this.ADDdialogVisible=true;
    
   },
   UpdateUser(){
     this.newscope.job=this.options[this.job].label;
     this.newscope.roles=this.roles[this.actor].label;
     this.$http.post('/update',{params:this.newscope}).then(res=>{
       this.tableData=res.data.List.user
        this.dialogVisible=false;
        alert("修改成功")
     })
   },
   //修改
   handleUpdate(scope){
      this.dialogVisible=true;
      this.newscope=scope
   },
   //删除
   handledelete(scope){
    let params={};
    params.userid=scope.id;
    this.$http.post('/delete',{params:params}).then(res=>{
      if(res.data.meta.status==200){
        alert("删除成功")
        this.tableData=res.data.List.user
      }
    })
   },
   //查找
   Search(){
      if(this.search==""){
        this.getTable()
      }
      else{
        let params={};
        params.userinfo=this.search;
        this.$http.post('/search',{params:params}).then(res=>{
          this.tableData=res.data.newarr;
        })
      }
   },
   getTable(){
     this.$http.get('/user').then((res)=>{
       console.log(res);
       this.tableArr=res.data.userList.data.userinfo.concat(res.data.List.user);
       this.tableData=this.ArrSlice(this.tableArr)
       this.pageTotal=res.data.userList.data.total;
       this.paseSize=res.data.userList.data.paseSize;
     })
   },
   ArrSlice(arr,num){
     if(num>1){
       return arr.slice(8*(num-1),8*num)
     }
     else{
     return arr.slice(0,8)
     }

   },
   pageChange(val){
     console.log(val);
     this.tableData=this.ArrSlice(this.tableArr,val)
   }
 },
 mounted(){
   this.getTable()
 }
}
</script>

<style lang="less" scoped>
.btn{
   width: 60px;
   background-color: lightseagreen;
   color: white;
 }
  .btncaozuo{
     width: 40px;
   background-color: lightseagreen;
   color: white;
  }
#form{
  height:600px;
  overflow: hidden;
}

</style>